<template>
  <div>
    <!--引用表格-->
    <BasicTable @register="registerTable" :rowSelection="rowSelection">
      <!--操作栏-->
      <template #action="{ record }">
        <TableAction :actions="handleTask(record)"/>
      </template>
      <!--字段回显插槽-->
      <template v-slot:bodyCell="{ column, record, index, text }">
      </template>
    </BasicTable>
    <!-- 表单区域 -->
    <TobedonePeriodicWorkListModel @register="registerModal" @success="handleSuccess"></TobedonePeriodicWorkListModel>
  </div>
</template>

<script lang="ts" name="tobedonePeriodicWork-tobedonePeriodicWork" setup>
import {ref, reactive, computed, unref} from 'vue';
import {BasicTable, useTable, TableAction} from '/@/components/Table';
import {useModal} from '/@/components/Modal';
import { useListPage } from '/@/hooks/system/useListPage'
import TobedoneModal from '../tobedone/components/TobedoneModal.vue'
import {columns, searchFormSchema, superQuerySchema} from '../tobedonePeriodicWork/TobedonePeriodicWork.data';
import {list, receiveTask, refuseTask} from '../tobedonePeriodicWork/TobedonePeriodicWork.api';
import { useUserStore } from '/@/store/modules/user';
import { useMessage } from '/@/hooks/web/useMessage';
import { getDateByPicker } from '/@/utils';
import TobedonePeriodicWorkListModel
  from "@/views/tobedonePeriodicWork/components/TobedonePeriodicWorkListModel.vue";
//日期个性化选择
const fieldPickers = reactive({
});
const queryParam = reactive<any>({});
const checkedKeys = ref<Array<string | number>>([]);
const userStore = useUserStore();
const { createMessage } = useMessage();
//注册model
const [registerModal, {openModal}] = useModal();
//注册table数据
const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({
  tableProps:{
    title: '配合部门待办周期性工作',
    api: list,
    columns,
    canResize:true,
    formConfig: {
      //labelWidth: 120,
      schemas: searchFormSchema,
      autoSubmitOnEnter:true,
      showAdvancedButton:true,
      fieldMapToNumber: [
      ],
      fieldMapToTime: [
      ],
    },
    actionColumn: {
      width: 150,
      fixed:'right'
    },
    beforeFetch: (params) => {
      if (params && fieldPickers) {
        for (let key in fieldPickers) {
          if (params[key]) {
            params[key] = getDateByPicker(params[key], fieldPickers[key]);
          }
        }
      }
      return Object.assign(params, queryParam);
    },
  },
})

const [registerTable, {reload},{ rowSelection, selectedRowKeys }] = tableContext
/**
 * 成功回调
 */
function handleSuccess() {
  (selectedRowKeys.value = []) && reload();
}
/*
* 接受任务操作栏，驳回任务操作栏
* */

function handleTask(record){
  return[
    {
      label:'接收任务',
      auth: 'tobedonePeriodicWork:yx_tobedonePeriodicWork:receiveTask',
      popConfirm: {
        title: '确定接收此任务吗？',
        confirm: handleReceiveTask.bind(null, record),
        placement: 'topLeft',
      },
    },{
      label: '驳回任务',
      auth: 'tobedonePeriodicWork:yx_tobedonePeriodicWork:refuseTask',
      popConfirm: {
        title: '确定驳回此任务吗？',
        confirm: handleRefuseTask.bind(null, record),
        placement: 'topLeft',
      },
    }
  ]
}

/*
* 接收任务事件
* */
async function handleReceiveTask(record) {
  await receiveTask({id: record.id}, handleSuccess);
}
/*
* 驳回任务事件
* */
async function handleRefuseTask(record) {
  await refuseTask({id: record.id}, handleSuccess);
}




</script>

<style lang="less" scoped>
:deep(.ant-picker),:deep(.ant-input-number){
  width: 100%;
}
</style>
